html,
body {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
    margin: 0;
    padding: 0;
}


:root {
    --color: #f342db;
}

.g-container {
    width: 100%;
    height: 100%;
}

.g-wrap {
    width: 100%;
    height: 100%;
    background: rgb(242, 183, 239);
    filter: contrast(8);
}

.g-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 86px;
    width: 100%;
    background: var(--color);

    &:before {
        content: "";
        position: absolute;
        top: -300px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        backdrop-filter: blur(5px);
    }
}

.g-bubble {
    position: absolute;
    border-radius: 50%;
    background-color: var(--color);
}

@for $i from 0 through 300 {
    .g-bubble:nth-child(#{$i}) {
        $width: 30+random(100)+px;
        left: #{(random(100)) + '%'};
        top: #{(30 + random(100))}px;
        width: $width;
        height: $width;
        animation: moveToTop #{(random(2500) + 1500) / 1000}s ease-in-out -#{random(5000)/1000}s infinite;
    }
}

@keyframes moveToTop {
    90% {
        opacity: 1;
    }

    100% {
        opacity: .08;
        transform: translate(-50%, -1280px) scale(.4);
    }
}